<template>
  <div id="background">
    <div id="contain">
      <h1>注册表单</h1>
      <div class="form">
        <label>用户名：</label>
        <input type="text" v-model.trim="username">
      </div>
      <div class="form">
        <label>密码：</label>
        <input type="password" v-model.trim="password" @input="validatePassword">
        <div class="psdErr" v-if="showError" style="color: red;">
          密码长度需要为5-15位
        </div>
      </div>
      <div class="form">
        <label>再次输入：</label>
        <input class="psdAgain" type="password" v-model.trim="password1" placeholder="请再次输入密码">
        <div class="psdErr1" v-if="password !== password1 && password1" style="color: red;">
          两次输入的密码不一致
        </div>
      </div>
      <div class="form">
        <label>身份：</label>
        <el-select v-model="role" placeholder="选择身份" style="width: 220px;">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </div>
      <div class="buttons">
        <button @click="goBack">返回</button>
        <button @click.prevent="handleSubmit" :disabled="!canSubmit">提交</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
#background {
  width: 100%;
  height: 100%;
  background-color: #cce5ff;
  background-image: radial-gradient(circle, rgba(112, 134, 182, 1), rgba(222, 243, 248, 0));
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#contain {
  width: 500px;
  padding: 20px;
  background: rgba(246, 245, 245, 0.8);
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  text-align: center;
}
#contain h1 {
  color: rgb(19, 1, 1);
  margin-bottom: 20px;
}
.form {
  margin-bottom: 20px;
  text-align: left;
  font-size: 18px;
  color: rgb(11, 1, 1);
}
label {
  display: inline-block;
  width: 120px;
}
input {
  width: calc(100% - 130px);
  padding: 8px;
  margin-left: 10px;
  border: 1px solid #4e5ef3;
  border-radius: 5px;
  background: white; /* 背景颜色设为白色 */
  color: #333;
}
input:focus {
  border-color: #0d0aa1;
}
.el-select .el-input__inner {
  background: transparent;
  border-color: #4e5ef3;
}
.el-select .el-input__inner:hover {
  border-color: #0d0aa1;
}
.psdErr, .psdErr1 {
  font-size: 14px;
  margin-top: 5px;
  margin-left: 130px;
}
.buttons {
  display: flex;
  justify-content: space-between;
}
button {
  width: 45%;
  padding: 10px;
  background: rgba(35, 19, 252, 0.7);
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 16px;
  cursor: pointer;
}
button:disabled {
  background: rgba(35, 19, 252, 0.3);
}
button:hover:not(:disabled) {
  background: rgba(35, 19, 252, 0.9);
}
</style>

<script setup>
// 从Vue库中导入ref和computed
import { computed, ref } from 'vue';
// 导入axios用于HTTP请求
import axios from 'axios';
// 从Element Plus导入ElMessage组件
import { ElMessage } from 'element-plus';
// 导入注册用户API
import { registerUser } from '@/api/getData';
// 导入Vue路由
import router from "@/router/index";

// 定义响应式变量
const username = ref(''); // 用户名
const password = ref(''); // 密码
const password1 = ref(''); // 确认密码
const role = ref(''); // 用户身份
const createdAt = new Date().toISOString(); // 创建时间
const showError = ref(false); // 显示错误

// 身份选项
const options = [
  { value: "学生", label: "学生" },
  { value: "老师", label: "老师" },
  { value: "家长", label: "家长" }
];

// 验证密码长度
const validatePassword = () => {
  showError.value = password.value.length < 5 || password.value.length > 15;
};

const handleSubmit = async () => {
  if (password.value !== password1.value) {
    ElMessage.error('两次输入的密码不一致');
    return;
  }
  if (!['学生', '老师', '管理员', '家长'].includes(role.value)) {
    ElMessage.error('身份只能是学生，老师，管理员，家长中的一个');
    return;
  }

  const item = {
    username: username.value,
    password: password.value,
    role: role.value,
    createdAt
  };

  try {
    const response = await registerUser(item);
    ElMessage.success("成功注册");
    router.push('/login');
  } catch (error) {
    ElMessage.error("提交失败: " + error.message);
    console.error("提交失败", error);
  }
};

// 返回登录页面
const goBack = () => {
  router.push('/login');
};

// 计算是否可以提交表单
const canSubmit = computed(() => {
  return password.value.length >= 5 &&
         password.value.length <= 15 &&
         password.value === password1.value &&
         ['学生', '老师', '管理员', '家长'].includes(role.value);
});
</script>
